<template>
  <div class="app-container">
    <el-table :data="articleList" border style="width: 100%;" >
      <el-table-column prop="id" label="ID" width="100px">
      </el-table-column>
      <el-table-column prop="title" label="标题" width="150px">
      </el-table-column>
      <el-table-column label="标题图片" width="200px">
        <template slot-scope="scope">
          <img :src="baseUrl+scope.row.img" width="100%"/>
          <el-button type="text" @click="photobox(1,scope.row)">修改</el-button>
        </template>
      </el-table-column>
      <el-table-column label="内容" >
        <template slot-scope="scope">
          <div v-html="scope.row.content"></div>
          <el-button type="text" @click="richtextbox(1, scope.row, scope.row.content)">修改</el-button>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" label="操作" width="260" class-name="small-padding fixed-width">-->
        <!--<template slot-scope="scope">-->
          <!--&lt;!&ndash;<el-button type="primary" size="small" @click="changeUserRole(scope.row,'sj')">升级团队成员</el-button>&ndash;&gt;-->
          <!--<el-button v-if="scope.row.uid_status!='WF'" size="small" @click="changeUidStatus(scope.row,'WF')">解封</el-button>-->
          <!--<el-button v-if="scope.row.uid_status!='YF'" size="mini" type="danger" @click="changeUidStatus(scope.row,'YF')">封号</el-button>-->
          <!--<el-button size="mini" type="danger" @click="deleteUser(scope.row)">删除</el-button>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="请在下方选择您要上传的图片" :visible.sync="tupian" width="60%">
      <uploadfile :file="file" v-on:func="func"></uploadfile>
    </el-dialog>
    <el-dialog title="请在下方输入所修改内容" :visible.sync="fuwenben" width="60%">
      <edictor v-if="fuwenben" :contents="contents" v-on:funb="funb" v-on:funa="funa"></edictor>
    </el-dialog>
  </div>
</template>

<script>
  import { fetchArticleList, updateArticle } from '@/api/infomation'
  import uploadfile from '../utils/uploadphoto'
  import edictor from '../utils/wangEdictor'

  export default {
    components: {
      edictor,
      uploadfile
    },
    data() {
      return {
        fuwenben: false,
        articleList: null,
        total: null,
        tupian: false,
        contents: {
          contentRow: '',
          index: '',
          content: ''
        },
        file: {
          indexRow: '',
          methodurl: 'updateArticlePhotoById.do',
          index: ''
        },
        listQuery: {
          page: 1,
          size: 10
        }
      }
    },
    created() {
      this.getArticleList()
    },
    methods: {
      getArticleList() {
        fetchArticleList(this.listQuery).then(response => {
          this.articleList = response.data.rows
          this.total = response.data.total
        })
      },
      richtextbox: function(index, row, content) {
        this.fuwenben = true
        this.contents.contentRow = row
        this.contents.index = index
        this.contents.content = content
      },
      photobox(index, row) {
        this.tupian = true
        this.file.indexRow = row
        this.file.index = index
      },
      funa() {
        this.fuwenben = false
        this.getArticleList()
      },
      funb(rows) {
        updateArticle(rows).then(response => {
        })
        this.fuwenben = false
        this.getArticleList()
        this.$message.success('修改成功')
        this.getArticleList()
      },
      func() {
        this.tupian = false
        this.getArticleList()
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getUserList()
      },
      handleSizeChange(val) {
        this.listQuery.size = val
        this.getUserList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getUserList()
      }
    }
  }
</script>

<style scoped>
  .app-container{
    padding: 30px;
  }
</style>
